
<!-- Specific CSS for the example -->
<style>
/**
     * Grid items
     */

#tiles li {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/**
     * Sort buttons
     */

#sortbys {
    list-style-type: none;
    text-align: center;
    margin: 0;
    position: relative;
    left: -35px;
}
#sortbys li {
    /* font-size: 12px; */
    float: left;
    padding: 6px 0 5px 0;
    cursor: pointer;
    margin: 0 0% 0 1%;
    width: 8%;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #b2bcc4;
    color: #ffffff;
}
#sortbys li:hover {
    background: #37A8AF;
}
#sortbys li.active {
    background: #37A8AF;
    color: #ffffff;
}
</style>
<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li><a href="#">Special Pages</a>
    </li>
    <li>Masonry</li>
</ol>




<!--
      These are our filter options. The "data-sortby" classes are used to identify which
      grid items to show.
      -->
<br/>
<ol id="sortbys">
    <li data-sortby="name" class="active">Name</li>
    <li data-sortby="price">Price</li>
    <li data-sortby="popularity">Popularity</li>
</ol>
<br/>

<div id="main" role="main">

    <ul id="tiles">
        <!--
          These are our grid items. Notice how each one has a data-attribute assigned that
          are used for sorting. The classes match the "data-sortby" properties above.
          -->
        <li data-price="20" data-popularity="4" data-name="icebear">
            <img src="http://placehold.it/285x200" height="283" width="200">
            <p>Icebear / 20 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="24" data-popularity="3" data-name="hand">
            <img src="http://placehold.it/300x200" height="300" width="200">
            <p>Hand / 24 € / &#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="12.50" data-popularity="2" data-name="water">
            <img src="http://placehold.it/250x200" height="252" width="200">
            <p>Water / 12,50 € / &#9733;&#9733;</p>
        </li>
        <li data-price="100" data-popularity="1" data-name="runner">
            <img src="http://placehold.it/160x200" height="158" width="200">
            <p>Runner / 100 € / &#9733;</p>
        </li>
        <li data-price="42.12" data-popularity="3" data-name="street">
            <img src="http://placehold.it/300x200" height="300" width="200">
            <p>Street / 42,12 € / &#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="15" data-popularity="1" data-name="bathroom">
            <img src="http://placehold.it/300x200" height="297" width="200">
            <p>Bathroom / 15 € / &#9733;</p>
        </li>
        <li data-price="70" data-popularity="2" data-name="sign">
            <img src="http://placehold.it/200x200" height="200" width="200">
            <p>Sign / 70 € / &#9733;&#9733;</p>
        </li>
        <li data-price="18.99" data-popularity="4" data-name="camera">
            <img src="http://placehold.it/200x200" height="200" width="200">
            <p>Camera / 18,99 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="5" data-popularity="4" data-name="winter">
            <img src="http://placehold.it/400x200" height="400" width="200">
            <p>Winter / 5 € / &#9733;&#9733;&#9733;&#9733;</p>
        </li>
        <li data-price="7" data-popularity="1" data-name="kitchen">
            <img src="http://placehold.it/300x200" height="300" width="200">
            <p>Kitchen / 7 € / &#9733;</p>
        </li>
        <!-- End of grid blocks -->
    </ul>

</div>




<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
(function($) {
    $('#tiles').imagesLoaded(function() {
        function comparatorName(a, b) {
            return $(a).data('name') < $(b).data('name') ? -1 : 1;
        }

        function comparatorPopularity(a, b) {
            return $(a).data('popularity') > $(b).data('popularity') ? -1 : 1;
        }

        function comparatorPrice(a, b) {
            return $(a).data('price') < $(b).data('price') ? -1 : 1;
        }

        // Prepare layout options.
        var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#main'), // Optional, used for some extra CSS styling
            offset: 2, // Optional, the distance between grid items
            itemWidth: 210, // Optional, the width of a grid item
            comparator: comparatorName
        };

        // Get a reference to your grid items.
        var $handler = $('#tiles li'),
            $sortbys = $('#sortbys li');

        // Call the layout function.
        $handler.wookmark(options);

        /**
         * When a filter is clicked, toggle it's active state and refresh.
         */
        var onClickSortBy = function(e) {
            e.preventDefault();
            $currentSortby = $(this);
            switch ($currentSortby.data('sortby')) {
                case 'price':
                    options.comparator = comparatorPrice;
                    break;
                case 'popularity':
                    options.comparator = comparatorPopularity;
                    break;
                case 'name':
                default:
                    options.comparator = comparatorName;
                    break;
            }

            $sortbys.removeClass('active');
            $currentSortby.addClass('active');

            $handler.wookmark(options);
        }

        // Capture filter click events.
        $sortbys.click(onClickSortBy);
    });
})(jQuery);
</script>
